<!-- header -->
<style type="text/css">

#search-results{
	width: 100%;
	padding: 2px;
	background-color: #fff;
	color: #0065AD;
}
#search-results h2{
	font-size: 12pt;
}
#search-results table{
	width: 99%;
	padding: 2px;
	color: #1d1d20;
}
#search-results table thead th{
	border: 1px solid #E0E0E0;
	font-weight: bold;
	background-color: #e0e0e0;
}
#search-results table tr td{
	border: 1px solid #E0E0E0;
}
#search-results table tr:hover{
	background-color: #ecedf0;
}
</style>
<table width="600" cellspacing="0" cellpadding="8" border="0">
	<tbody>
		<tr>
			<td bgcolor="#e0e0e0" colspan="2"><b><?=$AppUI->_('Search items')?></b></td>
		</tr>
		<tr>
			<td align="right"><b><?=$AppUI->_('Code')?></b></td>
			<td width="90%">
				<form method="post" id="ls-form" action="<?php echo ('ajax'); ?>">
			        <input type="hidden" name="suppressHeaders" value="1"/>
					<input type="hidden" name="screen" id="screen" value="<?=$screen?>" />
					<input type="text" name="searchterm" id="searchterm" value="" />
            		<input type="submit" name="Submit" id="submit" value="Submit" />
				</form>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<div id="search-results-wrapper">
			        <div id="search-results" class="scroll">
			        <?php if($posts): ?>
			                <h2>Search results:</h2>
			                <?php $count = 1; foreach($posts as $key => $post) : ?>
			                <h3><?php echo $count; ?>. <?php echo $post['title']; ?></h3>
			                <p><?php echo $post['body']; ?></p>
			                <?php $count++; endforeach; ?>
			        <?php else: ?>
			                <h2>Search results:</h2>
			                <p>Your query did not match any posts.</p>
			        <?php endif; ?>
			        </div><!-- end search-results -->
				</div><!-- end search-results-wrapper -->
			</td>
		</tr>
	</tbody>
</table>
<!-- form-container-wrapper -->
<!-- footer-->
<div id="idBuildSearchResult" style="visibility: hidden; display: none">
    var Site = {
        start: function(){
                Site.liveSearch();
        },
        liveSearch: function(){
                //set focus on the search form
                $('searchterm').focus();

                //attach a keyup event to the searchfield
                $('searchterm').addEvent('keyup', function(event){
                        //controller's URI
                        var url = '<?php echo '?m=items&a=item_do_livesearch&suppressHeaders=1'; ?>';
						url = url.replace(/amp;/g, '');//because of & be converted to &amp; html entity character
                        //AJAX request
                        new Ajax(url, {
                                method: 'post',
                                onComplete: function(request){
                                        //prepare search container for new results
                                        $('search-results').empty();

                                        //if controller returned some results decode them
                                        if(request) var results = Json.evaluate(request);
                                        //pass results object to the output method
                                        if(results) Site.buildSearchResults(results);
                                },
                                //post search form
                                postBody: $('ls-form')

                        }).request();

                        //return false;
                });
        },

        buildSearchResults: function(results){
                //prepare the container for newly fetched results
                var container = $('search-results');
                var heading = new Element('h2').setHTML('Search results:').injectInside(container);

                //output the results
                var tableCon = new Element('table').injectInside(container);
                var theadCon = new Element('thead').injectInside(tableCon);
                var trCon = new Element('tr').injectInside(theadCon);
                var thCon = new Element('th', {'styles':{'padding':'3px'}}).setText('No').injectInside(trCon);
                var thCon1 = new Element('th').setText('Code').injectInside(trCon);
                var thCon2 = new Element('th').setText('Name').injectInside(trCon);
                var thCon3 = new Element('th').setText('Type').injectInside(trCon);

                results.each(function(result, i) {
                        var title = new Element('h3').injectInside(container);
                        var trCon = new Element('tr').injectInside(tableCon);
                        var tdCon = new Element('td', {'styles':{'width':'32px', 'text-align':'center'}}).setHTML(i + 1).injectInside(trCon);

                        var tdCon1 = new Element('td').injectInside(trCon);
                        var link = new Element('a', {'onClick' : 'doSelectItem(\'' + result.item_id  + '\', \'' + result.item_code + '\', \''+ result.item_name + '\', \''+ result.type_name + '\', \''+ result.item_quantity_unit + '\', \''+ result.item_weight_unit + '\', \''+ result.item_volume_unit + '\')'}).setHTML(result.item_code).injectInside(tdCon1);
                        var tdCon2 = new Element('td').setHTML(result.item_name).injectInside(trCon);
                        var tdCon3 = new Element('td').setHTML(result.type_name).injectInside(trCon);
                        //var body = new Element('p').setHTML(result.body).injectAfter(title);
                        //var br = new Element('br').injectAfter(body);
                });
        }

    };
    //window.addEvent('domready', Site.start);
    Site.start();
//]]>
</div>
<script language="JavaScript" type="text/javascript">
	eval($('idBuildSearchResult').innerHTML);
</script>
